<template>
  <view class="transaction-container">
    <!-- 搜索栏 -->
    <view class="search-container">
      <view class="search-box">
        <view class="search-icon">
          <!-- 使用更小的图标尺寸 -->
          <u-icon name="search" size="20" color="#999"></u-icon>
        </view>
        <input 
          type="text" 
          class="search-input" 
          placeholder="姓名/身份证号查询往来好友信息" 
          v-model="searchText"
          @confirm="handleSearch"
        />
        <button class="search-button" @click="handleSearch">查询</button>
      </view>
    </view>
    
    <!-- 联系人列表 -->
    <view class="contacts-list">
      <view class="list-header">
        <view class="name">姓名</view>
        <view class="id">身份证</view>
        <view class="operation">操作</view>
      </view>
      
      <view class="contacts-container">
        <view 
          class="contact-item" 
          v-for="(contact, index) in contacts" 
          :key="index"
          :class="{'contact-item-even': index % 2 === 1}"
        >
          <view class="name">
            <text class="contact-avatar">{{contact.otherName.substring(0, 1)}}</text>
            <text>{{ contact.otherName }}</text>
          </view>
          <view class="id">{{ contact.otherIdCard }}</view>
          <view class="operation">
            <view class="detail-btn" @click="viewDetail(contact)">
              <u-icon name="file-text" size="24" color="#2468f2" style="margin-right: 6rpx;"></u-icon>
              <text>详情</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getContractList } from '@/api/user'
export default {
  data() {
    return {
      searchText: '',
      contacts: [],
    }
  },
  onLoad() {
    this.getContractList()
    
    // 监听页面滚动到底部
  },

  methods: {
    getContractList() {
      getContractList().then(res => {
        console.log(res.data.data)
        this.contacts = res.data.data
      })
    },
    handleSearch() {
      const searchTerm = this.searchText.trim().toLowerCase();
      
      if (!searchTerm) {
        this.displayContacts = [...this.contacts];
        return;
      }
    },
    
    // 查看详情
    viewDetail(contact) {
      uni.showToast({
        title: `查看${contact.name}的详情`,
        icon: 'none'
      });
      
      // 在实际应用中，这里可以跳转到详情页面
      // uni.navigateTo({
      //   url: `/pages/transaction/detail?id=${contact.idCard}&name=${contact.name}`
      // });
    }
  }
}
</script>

<style lang="scss">
.transaction-container {
  min-height: 100vh;
  background-color: #f0f2f5;
  padding-bottom: 120rpx; // 为底部导航留出空间
}

.search-container {
  padding: 30rpx;
  background: linear-gradient(to right, #3a8aff, #2468f2);
  position: sticky;
  top: 0;
  z-index: 100;
}

.search-box {
  display: flex;
  border-radius: 40rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.1);
  background-color: #fff;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-input {
  flex: 1;
  padding: 24rpx 30rpx 24rpx 70rpx;
  border: none;
  font-size: 28rpx;
  background-color: #fff;
}

.search-button {
  background: linear-gradient(to right, #3a8aff, #2468f2);
  color: white;
  border: none;
  padding: 0 48rpx;
  font-size: 28rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: normal;
}

.contacts-list {
  padding: 20rpx 30rpx;
  background-color: transparent;
}

.list-header {
  display: flex;
  padding: 30rpx 20rpx;
  color: #666;
  font-size: 28rpx;
  font-weight: 500;
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  margin-bottom: 2rpx;
}

.list-header .name {
  flex: 1.2;
  min-width: 200rpx;
}

.list-header .id {
  flex: 1.8;
}

.list-header .operation {
  flex: 0.8;
  text-align: center;
}

.contacts-container {
  background-color: #fff;
  border-radius: 0 0 16rpx 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
  margin-bottom: 30rpx;
}

.contact-item {
  display: flex;
  padding: 30rpx 20rpx;
  transition: all 0.3s;
  background-color: #fff;
}

.contact-item-even {
  background-color: #f9fafc;
}

.contact-item:active {
  background-color: #f0f7ff;
}

.contact-avatar {
  display: inline-flex;
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: linear-gradient(45deg, #3a8aff, #2468f2);
  color: #fff;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  margin-right: 20rpx;
}

.contact-item .name {
  flex: 1.2;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  min-width: 200rpx;
  overflow: hidden;
}

.contact-item .id {
  flex: 1.8;
  font-size: 28rpx;
  color: #666;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-item .operation {
  flex: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rpx 16rpx;
  background-color: rgba(36, 104, 242, 0.1);
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #2468f2;
  cursor: pointer;
  transition: all 0.3s;
}

.detail-btn:active {
  background-color: rgba(36, 104, 242, 0.2);
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  color: #999;
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 40rpx;
  color: #999;
}

.empty-state text {
  margin-top: 20rpx;
}
</style> 